<template>
  <div class="home">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <h3>疫情防控后台管理系统</h3>
        <div>其他信息</div>
      </el-header>
      <el-container>
        <!-- 侧边菜单区 -->
        <el-aside width="200px">
            <el-menu default-active="/statistic" background-color="#333" text-color="#fff" router >
                <el-menu-item index="/statistic">首页</el-menu-item>
                <el-menu-item index="/pass">通行证管理</el-menu-item>
                  <el-sub-menu index="1">
                    <template #title>
                      <span>住户申请</span>
                    </template>
                    <el-menu-item index="/eventManage">突发事件管理</el-menu-item>
                    <el-menu-item index="/userAdd">申请住户</el-menu-item>
                  </el-sub-menu>

              <el-sub-menu index="2">
                <template #title>
                  <span>信息管理</span>
                </template>
                <el-menu-item index="/notice">公告管理</el-menu-item>
                <el-menu-item index="/eventSolve">突发事件处理</el-menu-item>
                <el-menu-item index="/userManage">住户管理</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="3">
                <template #title>
                  <span>来访登记</span>
                </template>
                <el-menu-item index="/userRegister">人员登记</el-menu-item>
                <el-menu-item index="/carRegister">车辆登记</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="4">
                <template #title>
                  <span>疫情管理</span>
                </template>
                <el-menu-item index="/confirmedPatient">确诊患者管理</el-menu-item>
                <el-menu-item index="/touch">密切接触者管理</el-menu-item>
                <el-menu-item index="/dead">死亡管理</el-menu-item>
                <el-menu-item index="/cure">治愈管理</el-menu-item>
              </el-sub-menu>

            </el-menu>
        </el-aside>
        <!-- 主体内容区 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>


<!-- 浏览器中看到 组件名和类名一样 -->
<style lang="less" scoped>
.home {
  .el-container {
    height: 100%;
  }
  height: 100%;
  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: #fff;
  }
  .el-aside {
    background-color: #333;
    color: #fff;
  }
}
</style>